<template>
  <div class="first1">
      <ul class="first1uls">
          <li v-for="(item,key) in datas" :key="key" @click="fn(item.url)">
              <div class="listop">
                  <img :src="require('../../assets/img/'+item.adPicture)" alt="">
                  <span id="fl">{{item.itemTypeName}}&nbsp;{{item.comLevelName}}&nbsp;{{item.employeeNumberName}}</span>
                  <span id="ft">{{item.companyName}}</span>
              </div>
              <div class="lisbottom">
                 <span class="nowrap"> {{item.shortDesc}}</span>
              </div>
          </li>
          <li>
              <div class="listop">
                  <img src="../../assets/img/img17.jpg" alt="">
                 
              </div>
              <div class="lisbottom">
                 <span class="nowrap"> </span>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data(){
        return{
            datas:[]
        }
    },
    methods:{
        fn(key){
            window.location.href = key
        }
    },
    computed:{
        ...mapState(["imgs"])
    },
    created:async function(){
        let {data} = await this.$http.get("/loginapi/getlietou")
        let Data = data.Data
        Data.forEach((item,index) => {
            item.adPicture=this.imgs[index]
            
        });
        this.datas=Data
        // console.log(this.datas);
    },
    
}
</script>

<style scoped>
#fl{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 60%;
    font-size: .18rem;
    display: block;
    position: absolute;
    color: #f6f6f8;
    font-weight: 700;
    left: 0;
    bottom: 30%;
}
#ft{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 60%;
    font-size: .18rem;
    display: block;
    position: absolute;
    color: #f6f6f8;
    font-weight: 700;
    right: 0;
    bottom: 10%;
}
.nowrap{
    font-size: .35rem;
}
.first1{
    width: 100%;
    padding: .2rem 0rem;
}
.listop{
    width: 3.45rem;
    height: 2.15rem;
    position: relative;
    
}
.first1uls{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
}
.first1uls>li{
    width: 3.45rem;
    height: 3.25rem;
    margin-bottom: .2rem;
}
.listop>img{
    width: 100%;
    height: 100%;
}
.lisbottom{
    height: 1.1rem;
    font-size: .28rem;
    color: black;
    background-color: #f6f6f8;
}
.lisbottom>span{
 line-height: .45rem;   
}

</style>